<template>
	<!-- <page-meta :page-style="noSlide?'overflow: hidden;' : 'overflow: auto;'"></page-meta> -->
  <view>
    <view class="tui-actionsheet" :class="[show ? 'tui-actionsheet-show' : '']">
	  <view class="regional-selection">
		<view class="specs-top">
		   <view class="flex" style="flex-direction: row;">
		     <image class="specs-image"  :src="goodsSpec.check_attr.sku_pic"></image>
		      <view class="flex pl-20" style="flex-direction: column;width: 525rpx;">
		        <view class="flex" style="flex-direction: row; justify-content: space-between;margin-bottom: 40rpx;">
		          <view class="specs-goods-name">{{goodsSpec.goods_title}}</view>
		          <view class="flex cancel-button">
					<u-icon name="close-circle" color="#999999" size="22" @click="hideSpecs()"></u-icon>					
		          </view>
		        </view>
		       <view class="flex" style="font-size: 26rpx; color: #000;">
		         <view ></view>		         
		        </view>
				<view class="flex justify-between mt-20">
				  <view class="specs-price">￥{{goodsSpec.check_attr.selling_price}}</view>
				  <view class="specs-num" >库存：{{goodsSpec.check_attr.stock}}</view>
				 </view>
		      </view>
		    </view> 
		   <view class="mt-20" v-for="(item1,index1) in goodsSpec.goodsSpecParam" :key="index">
				  <view class="specs-title">{{item1.name}}</view>
				  <view class="specs-cell">
					<view class="specs-name" :class="(children1.checked?'specs-name-select':'')" v-for="(children1,index2) in item1.list" :key="index"   @tap="clickSkuValue(index1,index2)">
					  <text>{{children1.name}}</text> 
					</view>
				  </view>      
		    </view>
		</view>	
	    <view style="padding-top: 46rpx;padding-bottom: 40rpx;background: #ffff">				
			<view class="flex justify-between align-center text-center pl-25 pr-20">
				<text>数量</text>
				<t-input-number :value="number" :carId="goodsSpec.check_attr.id" @InputNumber="InputNumber"></t-input-number>
			</view>
			<view class="flex justify-between align-center pt-30 pl-20 pr-20 mb-15" v-if="goodsTyep==2">   
				<view class="submit-btn-left" @click="order_car()">加入购物车</view>
				<view class="submit-btn-right" style="background: #36B3E9 ;;margin-top:0rpx" @click="order_pay()">立即购买</view>
			</view>	
		  <view class="flex justify-between align-center pt-30 pl-20 pr-20 mb-15" v-if="goodsTyep==1">
			<view class="submit-btn-right" style="background: #36B3E9 ;;margin-top:0rpx" @click="order_front()">去下单</view>
		  </view>
		</view>
	  </view>
    </view>
	 <!-- 遮罩层 -->
	<view  class="tui-actionsheet-mask"  :class="[show ? 'tui-mask-show' : '']"  @tap="handleClickMask">	
	
	</view>
  </view>
</template>
 
<script>
	import input_number from "@/components/input-number/index.vue";
export default {
  components: {
     "t-input-number": input_number,
  },
  props: {
    //点击遮罩 是否可关闭
    maskClosable: {
      type: Boolean,
      default: true,
    },
    //显示操作菜单
    show: {
      type: Boolean,
      default: false,
    }
  },
  data () {
	  return {
		  ...getApp().globalData.config,
		goodsSpec:{
			check_attr:{
				selling_price:0.00,
				stock:0
			}
		},
		cateId:"1",
		number:1,
		noSlide:true,
		date_show:false,
		goodsTyep:2,
	  }
  },
  
    created() {
    },
	methods:  {   
		open_date(){
			this.date_show=true
		},
		//立即购买
		order_pay(){
			let that=this
			let goods= this.goodsSpec;
			let storageData = uni.getStorageSync('userInfo');
			let car={
				goodsId:goods.id,
				specId:goods.check_attr.id,
				number:this.number,
				token:storageData.token,
				login_type:'app'
			}
			uni.setStorageSync('shop_type', 'quick');
			let  cardata = JSON.stringify(car)   
			this.$emit("chooseCancel",{type:2});
			uni.navigateTo({
				url:"/pages/pagesOrder/confirm/index?value="+cardata+"&type=1"
			})
		},
		//立即购买
		order_front(){
			let that=this
			let goods= this.goodsSpec;
			let storageData = uni.getStorageSync('userInfo');
			let car={
				goodsId:goods.id,
				specId:goods.check_attr.id,
				number:this.number,
				token:storageData.token,
				login_type:'app'
			}
			uni.setStorageSync('shop_type', 'quick');
			let  cardata = JSON.stringify(car)   
			this.$emit("chooseCancel",{type:2});
			uni.navigateTo({
				url:"/pages/front/confirm/index?value="+cardata+"&type=1"
			})
		},
		//加入购物车
		order_car(){			
			let that=this
			let goods= this.goodsSpec;
			let storageData = uni.getStorageSync('userInfo');
			let car={
				goodsId:goods.id,
				specId:goods.check_attr.id,
				number:this.number,
				token:storageData.token,
				login_type:'app'
			}
		    let goodsId=car.goodsId
			
		    this.$http.goodsCar(car).then(res => {					
				if(res.resCode=="9999"){
				  uni.showToast({title:res.resMessage,icon: 'none'})				
				  that.$emit("specsPay", {car_total:res.data.car_total,setting_money:res.data.car_money_total,goodsId:goodsId,goods_number:res.data.goods_number})
				}else{					
				  uni.showToast({title:res.resMessage,icon: 'none'})        
				}
		    })
			setTimeout(function(){
				that.$emit("chooseCancel",{type:2});  	
			},1500)
			
		},
		handleClickMask() {
			this.$emit("chooseCancel",{type:2});  	
		},
		NgoodsSpec(spec,type){
			let spec_name=''
			for (let i = 0; i < spec.goodsSpecParam.length; i++) {
				spec_name+=spec.goodsSpecParam[i].name+":"
				for (let j = 0; j < spec.goodsSpecParam[i].list.length; j++) {
				  if(spec.goodsSpecParam[i].list[j].checked){
					spec_name+=spec.goodsSpecParam[i].list[j].name+','
				  }          
				}
			}
			spec_name=spec_name.slice(0,-1)   
			spec['check_attr']=spec.goodsSpecList[spec_name]  		 
			this.goodsSpec=spec		
			this.number=1,
			this.goodsTyep=type
		},
		hideSpecs(){
			this.$emit("chooseCancel",{type:2});  	
		},  
		//属性
		clickSkuValue(index1,index2){
			let that = this;    
			let spec=that.goodsSpec
			for (let i = 0; i < spec.goodsSpecParam.length; i++) {        
				if(i == index1){
					for (let j = 0; j < spec.goodsSpecParam[i].list.length; j++) {
						if(j==index2){
						  spec.goodsSpecParam[i].list[j].checked=1
						}else{
						  spec.goodsSpecParam[i].list[j].checked=0
						}          
					}
				}        
			}		
			let spec_name=''
			for (let i = 0; i < spec.goodsSpecParam.length; i++) {
				spec_name+=spec.goodsSpecParam[i].name+":"
				for (let j = 0; j < spec.goodsSpecParam[i].list.length; j++) {
					if(spec.goodsSpecParam[i].list[j].checked){
						spec_name+=spec.goodsSpecParam[i].list[j].name+','
					}          
				}
			}
			spec_name=spec_name.slice(0,-1)   
			spec['check_attr']=spec.goodsSpecList[spec_name]      
			this.goodsSpec=spec
		},
		//修改数量
		InputNumber(e){
			if(e.type=='Minus'){
				if((this.number-1)<=0) this.number=1
				else this.number--
			}else{
				this.number++
			}
		}		
	},
};
</script>
 
<style scoped lang="scss">
	
@import 'uview-ui/theme.scss';
@import "uview-ui/index.scss";
.tui-actionsheet {
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  visibility: hidden;
  transform: translate3d(0, 100%, 0);
  transform-origin: center;
  transition: all 0.3s ease-in-out;
  // background: #eaeaec;
  min-height: 100rpx;
}
.cancel-button{
	position: relative;
	    margin-top: -30rpx;
	    margin-right: -12rpx;
}
 
.tui-actionsheet-show {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}
.regional-selection {
  text-align: center;
  //height: 500rpx;
  background: #fff;
      border-radius: 10rpx;
}
.tui-actionsheet-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9996;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
 
.tui-mask-show {
  opacity: 1;
  visibility: visible;
}

/* component/specs/index.wxss */

.specs-top{
  padding: 36rpx 20rpx 0rpx 20rpx;
  align-items: flex-end;
}

.specs{
  padding: 6rpx 20rpx 0rpx 20rpx;
  align-items: flex-end;
}

.specs-image {
  width: 152rpx !important;
  height: 152rpx !important;
  background: rgba(0, 0, 0, 0);
  border: 1rpx solid #E5E9E8;
  border-radius: 16rpx;
}

.specs-title {
	display: flex;
  font-size: 28rpx;
  color: rgba(1, 31, 55, 0.8);
  opacity: 1;
  margin: 30rpx 0 20rpx 0;
}

.specs-cell{
  display: flex;
  flex-wrap: wrap;
}

.specs-name {
  color: #888888;
  border: 1rpx solid #888888;
  border-radius: 38rpx;
  padding: 8rpx 20rpx;
  font-size: 28rpx;
  margin-right: 15rpx;
  margin-bottom: 20rpx;
}

.specs-name-select {
  // background-color:  #1989fa;
  color: #fff;
  background-color: #36B3E9;
  border: 1rpx solid #36B3E9;
  border-radius: 38rpx;
}


.specs-goods-name {
	margin-top: 10rpx;
  font-size: 32rpx;
  line-height: 40rpx;
}

.specs-price {
  font-size: 28rpx;
  color: #000000;
  font-weight: bold;
  margin-left: -5rpx;
}

.specs-prices {
  font-size: 28rpx;
  color: #EE4D52;
  // margin-top: 5rpx;
  margin-left: 5rpx;
}

.specs-num {
  font-size: 28rpx;
  color: #999999;
}

.submit-btn-left {
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   min-width: 240rpx;
   width: 60%;
   height: 76rpx;
   opacity: 1;
   border-radius: 38rpx;
   background: #36B3E9;
   border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
   border: 2rpx solid #DDDDDD;
}

.submit-btn-right {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  min-width: 240rpx;
  width: 100%;
  height: 76rpx;
  opacity: 1;
  border-radius: 38rpx;
  margin-top: 2rpx;
}
.specs{
 
    margin-bottom: -44rpx;
    
}
.main-bottom{
  display: flex;
  flex-direction:column;
}

.date{
	display: flex;
	font-size: 28rpx;
	color: rgba(1, 31, 55, 0.8);
}


</style>